<template>
	<view class="order">
		<view class="order_item" v-for="(item, index) in list" :key="index">
			<view class="order_item_strip">
				<view class="order_item_strip_title">
					<text>{{ $currency }}</text>
					<text class="price">{{ item.price }}</text>
				</view>
				<view class="order_item_strip_title">
					{{ $t('game.createtime') }} {{ item.created }}
				</view>
			</view>
			<view class="order_item_strip">
				<view class="order_item_strip_ntr">
					{{ $t('game.contr') }}
				</view>
			</view>
			<view class="order_item_strip">
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('game.period') }}
					</view>
					<view class="content">
						{{ item.pid }}
					</view>
				</view>
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('game.select') }}
					</view>
					<view class="content">
						<text v-if="item.number" class="s_num">
							{{ item.number }}
						</text>
						<text v-else :class="{'s_green': item.color == 1, 's_violet': item.color == 2, 's_red': item.color == 3}">
							{{ item.color == 1 ? $t('game.cgreen') : item.color == 2 ? $t('game.cviolet') : $t('game.cred') }}
						</text>
					</view>
				</view>
			</view>
			<view class="order_item_strip">
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('game.status') }}
					</view>
					<view class="content" :class="[item.status == 1 ? 's_green': 's_wait']">
						{{ item.status == 1 ? $t('game.win') : item.status == 2 ?  $t('game.lose') :  $t('game.waiting')}}
					</view>
				</view>
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('game.pay') }}
					</view>
					<view class="content">
						{{ item.price }}
					</view>
				</view>
			</view>
			<view class="order_item_strip">
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('game.result') }}
					</view>
					<view class="content">
						<text class="u-m-r-10">{{ item.lucky_number }}</text>
						<template v-for="(ems, eindex) in item.lucky_color">
							<text class="u-m-r-10" :class="{'s_green': ems == 1, 's_violet': ems == 2, 's_red': ems == 3}">
								{{ems == 1 ? $t('game.cgreen') : ems == 2 ? $t('game.cviolet') : $t('game.cred') }}
							</text>
						</template>
					</view>
				</view>
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('finance.amount') }}
					</view>
					<view class="content">
						{{ item.amount }}
					</view>
				</view>
			</view>
			<view class="order_item_strip">
				<view class="order_item_strip_le">
					<view class="title">
						{{ $t('game.opentime') }}
					</view>
					<view class="content">
						{{ item.created }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default: ()=> {
					return []
				}
			}
		},
		data () {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		height: 100%;
		.order_item {
			margin-bottom: 16rpx;
			padding: 32rpx 28rpx 32rpx 50rpx;
			background-color: #fff;
			.order_item_strip {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.order_item_strip_title {
					font-size: 26rpx;
					font-family: Roboto, Roboto-Medium;
					font-weight: 500;
					color: #919191;
					letter-spacing: 0rpx;
					
					.price {
						margin-left: 6rpx;
						font-size: 36rpx;
						color: #FF5C5C;
					}
				}
				
				.order_item_strip_le {
					flex: 1;
					margin-bottom: 12rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					.title {
						flex-shrink: 0;
						min-width: 124rpx;
						font-size: 26rpx;
						font-family: Roboto, Roboto-Regular;
						font-weight: 400;
						color: #b9b9b9;
						letter-spacing: 0rpx;
					}
					
					.content {
						font-size: 26rpx;
						font-family: Roboto, Roboto-Regular;
						font-weight: 400;
						color: #17273a;
						letter-spacing: 0rpx;
						margin-left: 10rpx;
					}
					
					.s_green {
						color: #55E273;
						font-weight: 500;
					}
					.s_violet {
						font-weight: 500;
						color: #FF62FF;
					}
					.s_red {
						color: #FF4343;
						font-weight: 500;
					}
					.s_wait {
						color: #EE5016;
						font-weight: 500;
					}
					.s_num {
						color: #649DFF;
						font-weight: 500;
					}
				}
			}
			.order_item_strip_ntr {
				margin-top: 28rpx;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				font-family: Roboto, Roboto-Medium;
				font-weight: 500;
				color: #17273a;
				letter-spacing: 0rpx;
			}
		}
		
	}
</style>
